<template>
	<view class="order-detail-page">
		<!-- 支付成功提示和门店信息 -->
		<view class="success-info-card">
			<text class="success-message">支付成功,请您前往指定门店消费</text>
			
			<view class="store-info">
				<uni-icons type="shop-filled" size="25" color="#fff"></uni-icons>
				<view class="store-details">
					<text class="store-name">{{ storeDetail.name }}</text>
					<text class="store-address">{{ storeDetail.address }}</text>
				</view>
				<uni-icons type="paperplane" size="20" color="#fff"></uni-icons>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-container">
			
			<!-- 订单详情卡片 -->
			<view class="order-detail-card">
				<text class="card-title">服务项目</text>
				
				<!-- 服务项目列表 -->
				<view class="service-list">
					<view class="service-item" v-for="(serviceIndex, index) in selectedServices" :key="index">
						<text class="service-name">{{ services[serviceIndex].name }}</text>
						<text class="service-price">¥{{ services[serviceIndex].price }}</text>
					</view>
				</view>
				
				<!-- 价格明细 -->
				<view class="price-details">
					<view class="price-item">
						<text class="price-label">原价</text>
						<text class="price-value">¥{{ originalPrice }}</text>
					</view>
					<view class="price-item" v-if="storeDiscount > 0">
						<text class="price-label">店家优惠</text>
						<text class="price-value discount">-¥{{ storeDiscount }}</text>
					</view>
					<view class="price-item" v-if="couponDiscount > 0">
						<text class="price-label">优惠券</text>
						<text class="price-value discount">-¥{{ couponDiscount }}</text>
					</view>
					<view class="price-item final-price">
						<text class="price-label">支付金额</text>
						<text class="price-value final">¥{{ totalPrice }}</text>
					</view>
				</view>
			</view>
			
			<!-- 订单信息卡片 -->
			<view class="order-info-card">
				<text class="card-title">订单信息</text>
				
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">订单号:</text>
						<text class="info-value">{{ orderNumber }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">下单时间:</text>
						<text class="info-value">{{ orderTime }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">预约时间:</text>
						<text class="info-value">{{ appointmentTime }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">车辆:</text>
						<text class="info-value">{{ selectedCar.model }}/{{ selectedCar.plate }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">备注:</text>
						<text class="info-value">{{ notes }}</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalPrice: '39.90',
				orderNumber: '324252536363634',
				storeDetail: {
					name: '',
					address: ''
				},
				selectedServices: [],
				services: [],
				selectedCar: {
					model: '奔驰-GR',
					plate: '豫A00001'
				},
				selectedCoupon: null,
				originalPrice: '0',
				storeDiscount: 0,
				couponDiscount: 0,
				orderTime: '',
				appointmentTime: '',
				notes: ''
			}
		},
		onLoad(options) {
			// 接收从paySuccess页面传递的参数
			if (options.totalPrice) {
				this.totalPrice = options.totalPrice;
			}
			if (options.orderNumber) {
				this.orderNumber = options.orderNumber;
			}
			this.loadOrderData();
		},
		methods: {
			loadOrderData() {
				// 从本地存储获取订单数据
				const storeData = uni.getStorageSync('selectedStoreDetail');
				const servicesData = uni.getStorageSync('selectedServicesData');
				const carData = uni.getStorageSync('selectedCar');
				const couponData = uni.getStorageSync('selectedCoupon');
				
				console.log('订单详情数据加载:', {
					storeData,
					servicesData,
					carData,
					couponData
				});
				
				// 设置门店信息
				if (storeData) {
					this.storeDetail = {
						name: storeData.name || '伟业汽车美容店 (人民路店)',
						address: storeData.address || '山阳区人民中路33号'
					};
				} else {
					// 如果没有门店数据，使用默认值
					this.storeDetail = {
						name: '伟业汽车美容店 (人民路店)',
						address: '山阳区人民中路33号'
					};
				}
				
				// 设置服务信息
				if (servicesData && servicesData.selectedServices && servicesData.services) {
					this.selectedServices = servicesData.selectedServices;
					this.services = servicesData.services;
					
					// 计算原价
					let total = 0;
					this.selectedServices.forEach(index => {
						if (this.services[index] && this.services[index].price) {
							total += parseFloat(this.services[index].price);
						}
					});
					this.originalPrice = total.toFixed(1);
					console.log('服务项目:', this.selectedServices, '服务数据:', this.services, '原价:', this.originalPrice);
				}
				
				// 设置车辆信息
				if (carData) {
					this.selectedCar = carData;
				}
				
				// 设置优惠券信息
				if (couponData) {
					this.selectedCoupon = couponData;
					this.couponDiscount = couponData.amount || 0;
				}
				
				// 计算店家优惠
				const originalPriceNum = parseFloat(this.originalPrice);
				const totalPriceNum = parseFloat(this.totalPrice);
				const couponDiscountNum = parseFloat(this.couponDiscount);
				
				this.storeDiscount = (originalPriceNum - totalPriceNum - couponDiscountNum).toFixed(1);
				if (this.storeDiscount < 0) {
					this.storeDiscount = 0;
				}
				
				// 设置时间信息
				this.orderTime = this.getCurrentTime();
				this.appointmentTime = this.getAppointmentTime();
				
				// 数据加载完成后清理本地存储
				setTimeout(() => {
					uni.removeStorageSync('selectedStoreDetail');
					uni.removeStorageSync('selectedServicesData');
					uni.removeStorageSync('selectedCar');
					uni.removeStorageSync('selectedCoupon');
					uni.removeStorageSync('selectedAppointmentTime');
				}, 1000);
			},
			
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				return `${year}.${month}.${day} ${hours}:${minutes}`;
			},
			
			getAppointmentTime() {
				// 从本地存储获取用户选择的预约时间
				const selectedAppointmentTime = uni.getStorageSync('selectedAppointmentTime');
				if (selectedAppointmentTime) {
					return selectedAppointmentTime;
				}
				
				// 如果没有预约时间，使用默认值
				const now = new Date();
				now.setDate(now.getDate() + 5); // 5天后
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');
				return `${year}.${month}.${day} 13:40`;
			}
		}
	}
</script>

<style scoped>
	.order-detail-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #3486FD 0%, #3486FD 100rpx, #0A64E7 350rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
		background-attachment: fixed;
		width: 100%;
		box-sizing: border-box;
	}

	.content-container {
		flex: 1;
		width: 100%;
		padding: 20rpx;
		padding-top: 200rpx;
		box-sizing: border-box;
		overflow-y: auto;
		position: relative;
		z-index: 2;
	}

	.success-info-card {
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
		
	}

	.success-message {
		font-size: 28rpx;
		color: #fff;
		display: block;
		margin-bottom: 30rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.store-info {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-radius: 12rpx;
		margin: 0 20rpx;
	}

	.store-details {
		flex: 1;
		margin-left: 20rpx;
	}

	.store-name {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}

	.store-address {
		font-size: 24rpx;
		color: #fff;
		opacity: 0.8;
		display: block;
	}

	.order-detail-card,
	.order-info-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.card-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 30rpx;
	}

	.service-list {
		margin-bottom: 30rpx;
	}

	.service-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.service-item:last-child {
		border-bottom: none;
	}

	.service-name {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.service-price {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.price-details {
		border-top: 1rpx solid #f0f0f0;
		padding-top: 20rpx;
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
	}

	.price-item.final-price {
		border-top: 1rpx solid #f0f0f0;
		margin-top: 15rpx;
		padding-top: 20rpx;
	}

	.price-label {
		font-size: 28rpx;
		color: #666;
	}

	.price-value {
		font-size: 28rpx;
		color: #333;
	}

	.price-value.discount {
		color: #f53f3f;
	}

	.price-value.final {
		color: #2ecc71;
		font-weight: bold;
		font-size: 32rpx;
	}

	.info-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
		width: 160rpx;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}
</style>
